<!DOCTYPE html>



  


<html class="theme-next mist use-motion" lang="zh-CN">
<head>
  <meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css" />







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css" />

<link href="/css/main.css?v=5.1.3" rel="stylesheet" type="text/css" />


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.3">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.3">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.3">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.3" color="#222">





  <meta name="keywords" content="Hexo, NexT" />





  <link rel="alternate" href="/atom.xml" title="Likianta Blog" type="application/atom+xml" />






<meta name="description" content="1. 先看一下最终的效果图 （左图是修改前的，右图是修改后的） 这里我们做了以下调整：  头像从CircleImageView换成了CircleTextImageView 头像增加了外描边 右侧的按钮图标全部重制了一遍 文字和编辑框的大小和间距也进行了调整（事实上代码更简洁了，后面会贴出全部的代码）">
<meta property="og:type" content="article">
<meta property="og:title" content="07 Anykey图像优化及文字头像生成与加载">
<meta property="og:url" content="https://likianta.coding.me/2017/1211202828/index.html">
<meta property="og:site_name" content="Likianta Blog">
<meta property="og:description" content="1. 先看一下最终的效果图 （左图是修改前的，右图是修改后的） 这里我们做了以下调整：  头像从CircleImageView换成了CircleTextImageView 头像增加了外描边 右侧的按钮图标全部重制了一遍 文字和编辑框的大小和间距也进行了调整（事实上代码更简洁了，后面会贴出全部的代码）">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-9/37057507.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-9/69068380.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-9/14155237.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-9/60401398.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-9/42255377.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-11/66000380.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-11/25897124.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-4/24254815.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-11/35913994.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-11/95314735.jpg">
<meta property="og:image" content="http://ozurciydg.bkt.clouddn.com/17-12-11/67724026.jpg">
<meta property="og:updated_time" content="2017-12-31T15:26:39.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="07 Anykey图像优化及文字头像生成与加载">
<meta name="twitter:description" content="1. 先看一下最终的效果图 （左图是修改前的，右图是修改后的） 这里我们做了以下调整：  头像从CircleImageView换成了CircleTextImageView 头像增加了外描边 右侧的按钮图标全部重制了一遍 文字和编辑框的大小和间距也进行了调整（事实上代码更简洁了，后面会贴出全部的代码）">
<meta name="twitter:image" content="http://ozurciydg.bkt.clouddn.com/17-12-9/37057507.jpg">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Mist',
    version: '5.1.3',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://likianta.coding.me/2017/1211202828/"/>





  <title>07 Anykey图像优化及文字头像生成与加载 | Likianta Blog</title>
  








</head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-CN">

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/"  class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Likianta Blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br />
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tutorials">
          <a href="/tags/tutorial-catalog/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            教程
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br />
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br />
            
            归档
          </a>
        </li>
      
        
        <li class="menu-item menu-item-tags">
          <a href="/tags/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-tags"></i> <br />
            
            标签
          </a>
        </li>
      
        
        <li class="menu-item menu-item-about">
          <a href="/about/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-user"></i> <br />
            
            关于
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://likianta.coding.me/2017/1211202828/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="Likianta">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="http://ozurciydg.bkt.clouddn.com/18-2-12/72826549.jpg">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Likianta Blog">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">07 Anykey图像优化及文字头像生成与加载</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2017-12-11T20:28:28+08:00">
                2017-12-11
              </time>
            

            

            
          </span>

          
            <span class="post-category" >
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/passport-pandora/" itemprop="url" rel="index">
                    <span itemprop="name">从零开发Anykey</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  9,791
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  45
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <h1 id="1-先看一下最终的效果图"><a href="#1-先看一下最终的效果图" class="headerlink" title="1. 先看一下最终的效果图"></a>1. 先看一下最终的效果图</h1><p><img src="http://ozurciydg.bkt.clouddn.com/17-12-9/37057507.jpg" alt=""></p>
<p>（左图是修改前的，右图是修改后的）</p>
<p>这里我们做了以下调整：</p>
<ol>
<li>头像从CircleImageView换成了CircleTextImageView</li>
<li>头像增加了外描边</li>
<li>右侧的按钮图标全部重制了一遍</li>
<li>文字和编辑框的大小和间距也进行了调整（事实上代码更简洁了，后面会贴出全部的代码）</li>
</ol>
<a id="more"></a>
<h1 id="2-解决真机调试发生OOM崩溃的问题"><a href="#2-解决真机调试发生OOM崩溃的问题" class="headerlink" title="2. 解决真机调试发生OOM崩溃的问题"></a>2. 解决真机调试发生OOM崩溃的问题</h1><p>在正式开始之前，我们先来解决上章（06章）遗留的问题。<br>虽然上章的成果在PC模拟器上能够正常运行，但是使用真机调试只要一进入就会OOM（Out of Memory）崩溃。</p>
<p>另外，在上章5.2章节提到的方法是可以临时解决此崩溃的：</p>
<blockquote>
<p>在<code>AndroidManifest.xml</code>中添加一行代码：</p>
</blockquote>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">manifest</span> <span class="attr">...</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">  <span class="tag">&lt;<span class="name">application</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:largeHeap</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">...</span>&gt;</span></span><br><span class="line">  <span class="tag">&lt;/<span class="name">application</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">manifest</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>不过此方法治标不治本。因为内存溢出的真正原因在于图片过大且处理不正确（仅指本次案例）。</p>
<p>所以我们要来优化图片加载过程：</p>
<h2 id="2-1-先来分析为什么之前的图片加载会导致内存溢出"><a href="#2-1-先来分析为什么之前的图片加载会导致内存溢出" class="headerlink" title="2.1. 先来分析为什么之前的图片加载会导致内存溢出"></a>2.1. 先来分析为什么之前的图片加载会导致内存溢出</h2><p>回想一下我们在哪些地方用到了加载图片：</p>
<ol>
<li>右分页头像</li>
<li>右分页所有的按钮图标</li>
</ol>
<p>把头像删除，会发现仍然崩溃，说明是第二条造成的。</p>
<p>崩溃的原因在于图标的分辨率过高，由于这些图片都是我在素材网上随便搜的，所以分辨率参差不齐（其中第一个按钮明显都有些模糊了），但多数都是几百的分辨率，所以图标看起来不大，但吃起内存相当惊人。</p>
<p>了解了问题所在，下面我们就把这些图标重制一遍：</p>
<h2 id="2-2-图标素材重制"><a href="#2-2-图标素材重制" class="headerlink" title="2.2. 图标素材重制"></a>2.2. 图标素材重制</h2><p><strong>使用“Iconfont（阿里巴巴矢量图）”+“Android Asset Studio”自制全套高清图标</strong></p>
<p>参考：图标在线生成工具Android Asset Studio的使用 - 泡在网上的日子 <a href="http://www.jcodecraeer.com/plus/view.php?aid=7823" target="_blank" rel="noopener">http://www.jcodecraeer.com/plus/view.php?aid=7823</a></p>
<p><strong>1. 首先打开阿里巴巴矢量图标库网站：<a href="http://www.iconfont.cn/" target="_blank" rel="noopener">http://www.iconfont.cn/</a></strong></p>
<p>比如我搜索“email”，选择其中一个，下载它的SVG或者PNG格式的文件：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-9/69068380.jpg" alt=""></p>
<p><strong>2. 然后打开Android Asset Studio网站：<a href="https://romannurik.github.io/AndroidAssetStudio/index.html" target="_blank" rel="noopener">https://romannurik.github.io/AndroidAssetStudio/index.html</a></strong></p>
<p>点击第六个Generic icon generator（第二个是生成启动图标的，也可以用）：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-9/14155237.jpg" alt=""></p>
<p>点击Image，在文件夹中选择你下载好的email.svg或者email.png，在Name处改成“ic_email”，就能自动生成所有屏幕密度等级的图标了（以压缩包的形式下载到本地）。</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-9/60401398.jpg" alt=""></p>
<p>按照此方法找全所有的按钮图标（分组、排序、锁、三点……）：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-9/42255377.jpg" alt=""></p>
<p>比如我找到的图标素材打包放在了度盘（2017年12月9日）：链接: <a href="https://pan.baidu.com/s/1dFPdBkH" target="_blank" rel="noopener">https://pan.baidu.com/s/1dFPdBkH</a> 密码: dgwu</p>
<p>有了这些图标后，还要在Android Studio中建立相应的目录：</p>
<p><strong>3. 在Android Studio中新建分辨率目录（切换到Project视图）</strong></p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-11/66000380.jpg" alt=""></p>
<p>右键 res目录 - New - Android resource directory - 设置第二行为drawable，在下面的列表框中找到“Density”传到右边的框，就可以新建drawable相关的资源目录了（如图所示）。</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-11/25897124.jpg" alt=""></p>
<p>一共有6个目录，我们最常用到的有两个（加粗显示）：</p>
<ul>
<li><del>drawable-ldpi</del> （低分辨率目录，基本用不上了）</li>
<li><del>drawable-mdpi</del> （其实这个就是默认的drawable目录了）</li>
<li>drawable-hdpi （2014主流机型）</li>
<li><strong>drawable-xhdpi</strong> （2015-2016主流机型）</li>
<li><strong>drawable-xxhdpi</strong> （2016-2017旗舰机型）</li>
<li>drawable-xxxhdpi （三星S8、S8+）</li>
</ul>
<p>由此可见，在上章中我们往drawable中存放高分辨率的图片且完全不压缩地加载是多么危险的一件事。</p>
<p>图标放置完毕后，这里姑且还是把右分页的布局再写一遍（其中涉及到了一些布局的细微调整，另外<strong>按钮的id名字全部都改了</strong>，自己注意着一一对照手动修改，按shift+f6可全局变更）</p>
<p><strong>4. <code>page_card_new.xml</code></strong></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br></pre></td><td class="code"><pre><span class="line">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span><br><span class="line"><span class="tag">&lt;<span class="name">RelativeLayout</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">xmlns:app</span>=<span class="string">"http://schemas.android.com/apk/res-auto"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">xmlns:tools</span>=<span class="string">"http://schemas.android.com/tools"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:background</span>=<span class="string">"@color/mycolorBackground"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:padding</span>=<span class="string">"5dp"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!-- 最外层是一个RelativeLayout，内边距5dp，背景色与左分页背景同色 --&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="tag">&lt;<span class="name">ScrollView</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_height</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_above</span>=<span class="string">"@id/user_save_button"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_marginBottom</span>=<span class="string">"1dp"</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;<span class="name">RelativeLayout</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span>&gt;</span></span><br><span class="line">            <span class="comment">&lt;!-- 这里同样使用的是RelativeLayout --&gt;</span></span><br><span class="line">            <span class="comment">&lt;!-- 因为考虑到以后可能还需要在上面贴一些控件等……所以用相对布局更好一些 --&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 头像的背景，根据头像主色调来生成（方法在函数中实现） --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_head_bg"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"108dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:background</span>=<span class="string">"@color/mycolorBackground2"</span> /&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 使用开源控件CircleTextImageView制作圆形头像 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">com.thinkcool.circletextimageview.CircleTextImageView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_head"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"96dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"96dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_centerHorizontal</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginTop</span>=<span class="string">"60dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">app:citv_border_width</span>=<span class="string">"2dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">app:citv_border_color</span>=<span class="string">"@color/mycolorBackground"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:src</span>=<span class="string">"@drawable/avatar_test"</span> /&gt;</span></span><br><span class="line">                <span class="comment">&lt;!-- 这里用的是一张测试图片：http://ozurciydg.bkt.clouddn.com/17-12-11/10844600.jpg --&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 常规表单填写 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">TableLayout</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/table1"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_below</span>=<span class="string">"@id/user_head"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:padding</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:shrinkColumns</span>=<span class="string">"1"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:stretchColumns</span>=<span class="string">"1"</span>&gt;</span></span><br><span class="line">                </span><br><span class="line">                <span class="comment">&lt;!-- 第一行，标题栏 --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">TableRow</span>&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:text</span>=<span class="string">"标题"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:textSize</span>=<span class="string">"18sp"</span> /&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:id</span>=<span class="string">"@+id/user_title"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_span</span>=<span class="string">"5"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:background</span>=<span class="string">"@drawable/bg_edittext"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:paddingLeft</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:paddingRight</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:singleLine</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:textColorHint</span>=<span class="string">"@color/colorAccent"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:textSize</span>=<span class="string">"16sp"</span> /&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="comment">&lt;!-- 分组按钮 --&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:id</span>=<span class="string">"@+id/user_title_button"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:clickable</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:src</span>=<span class="string">"@drawable/icon_folder"</span> /&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line">                </span><br><span class="line">                <span class="comment">&lt;!-- 第二行，帐号栏 --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">TableRow</span>&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:text</span>=<span class="string">"帐号"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:textSize</span>=<span class="string">"18sp"</span> /&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:id</span>=<span class="string">"@+id/user_name"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_span</span>=<span class="string">"5"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:background</span>=<span class="string">"@drawable/bg_edittext"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:paddingLeft</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:paddingRight</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:singleLine</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:textSize</span>=<span class="string">"16sp"</span> /&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="comment">&lt;!-- 这个按钮是用来关联同标题的小号的，点击后会让你设置哪个是大号，哪个是隐私号，哪些是小号…… --&gt;</span></span><br><span class="line">                    <span class="comment">&lt;!-- 小号还可以手动排序 --&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:id</span>=<span class="string">"@+id/user_name_button"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:src</span>=<span class="string">"@drawable/icon_list_numbered"</span> /&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line">                </span><br><span class="line">                <span class="comment">&lt;!-- 第三行，密码栏 --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">TableRow</span>&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:text</span>=<span class="string">"密码"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:textSize</span>=<span class="string">"18sp"</span> /&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:id</span>=<span class="string">"@+id/user_password"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_span</span>=<span class="string">"5"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:background</span>=<span class="string">"@drawable/bg_edittext"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:paddingLeft</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:paddingRight</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:singleLine</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:textSize</span>=<span class="string">"16sp"</span> /&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="comment">&lt;!-- 随机密码生成按钮 --&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:id</span>=<span class="string">"@+id/user_password_button"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:src</span>=<span class="string">"@drawable/icon_random"</span> /&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line">                </span><br><span class="line">                <span class="comment">&lt;!-- 第四行，比较特殊，是一排绑定按钮 --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">TableRow</span> <span class="attr">android:id</span>=<span class="string">"@+id/row4"</span>&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:text</span>=<span class="string">"绑定"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:textSize</span>=<span class="string">"18sp"</span> /&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="comment">&lt;!-- 这些绑定按钮可自定义还可横向滚动 --&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">HorizontalScrollView</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:id</span>=<span class="string">"@+id/user_bound_bar"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_gravity</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_span</span>=<span class="string">"5"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:paddingEnd</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:paddingStart</span>=<span class="string">"5dp"</span>&gt;</span></span><br><span class="line">                        </span><br><span class="line">                        <span class="tag">&lt;<span class="name">LinearLayout</span></span></span><br><span class="line"><span class="tag">                            <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                            <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span>&gt;</span></span><br><span class="line">                            </span><br><span class="line">                            <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:id</span>=<span class="string">"@+id/user_bound_phone"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:src</span>=<span class="string">"@drawable/icon_bound_phone"</span> /&gt;</span></span><br><span class="line">                            </span><br><span class="line">                            <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:id</span>=<span class="string">"@+id/user_bound_email"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:src</span>=<span class="string">"@drawable/icon_bound_email"</span> /&gt;</span></span><br><span class="line">                            </span><br><span class="line">                            <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:id</span>=<span class="string">"@+id/user_bound_qq"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:src</span>=<span class="string">"@drawable/icon_bound_qq"</span> /&gt;</span></span><br><span class="line">                            </span><br><span class="line">                            <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:id</span>=<span class="string">"@+id/user_bound_wechat"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:src</span>=<span class="string">"@drawable/icon_bound_wechat"</span> /&gt;</span></span><br><span class="line">                            </span><br><span class="line">                            <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:id</span>=<span class="string">"@+id/user_bound_weibo"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:src</span>=<span class="string">"@drawable/icon_bound_weibo"</span> /&gt;</span></span><br><span class="line">                            </span><br><span class="line">                            <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:id</span>=<span class="string">"@+id/user_bound_wangyiyun"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                                <span class="attr">android:src</span>=<span class="string">"@drawable/icon_bound_wangyiyun"</span> /&gt;</span></span><br><span class="line">                        </span><br><span class="line">                        <span class="tag">&lt;/<span class="name">LinearLayout</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">HorizontalScrollView</span>&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="comment">&lt;!-- 对绑定按钮进行详细设置，比如默认值、同类型小号（红色显示）、新增自定义字段等 --&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:id</span>=<span class="string">"@+id/user_bound_button"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:src</span>=<span class="string">"@drawable/icon_more"</span> /&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line">                </span><br><span class="line">                <span class="comment">&lt;!-- 第五行，URL --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">TableRow</span>&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:text</span>=<span class="string">"URL"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:textSize</span>=<span class="string">"18sp"</span> /&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="comment">&lt;!-- 默认是单行输入的 --&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:id</span>=<span class="string">"@+id/user_url"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_height</span>=<span class="string">"30dp"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_span</span>=<span class="string">"5"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:background</span>=<span class="string">"@drawable/bg_edittext"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:paddingLeft</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:paddingRight</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:singleLine</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:textSize</span>=<span class="string">"16sp"</span> /&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="comment">&lt;!-- 通过此按钮可以切换单/多行输入模式 --&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:id</span>=<span class="string">"@+id/user_url_button"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_gravity</span>=<span class="string">"center_vertical"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:src</span>=<span class="string">"@drawable/icon_listadd"</span> /&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line">                </span><br><span class="line">                <span class="comment">&lt;!-- 第六行，备注栏 --&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">TableRow</span>&gt;</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="comment">&lt;!-- 备注栏是多行输入的 --&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">EditText</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:id</span>=<span class="string">"@+id/user_note"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_marginTop</span>=<span class="string">"15dp"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:layout_span</span>=<span class="string">"7"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:background</span>=<span class="string">"@drawable/bg_edittext"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:hint</span>=<span class="string">"请在此输入备注"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:padding</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">                        <span class="attr">android:textSize</span>=<span class="string">"14sp"</span> /&gt;</span></span><br><span class="line">                </span><br><span class="line">                <span class="tag">&lt;/<span class="name">TableRow</span>&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="tag">&lt;/<span class="name">TableLayout</span>&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 这个小按钮比较特殊，是专为备注栏服务的，功能是点击一下生成一条分割线 --&gt;</span></span><br><span class="line">            <span class="comment">&lt;!-- 默认状态是隐藏的，只有当备注栏获取焦点时才会出现 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_note_button"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignBottom</span>=<span class="string">"@id/table1"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_alignParentEnd</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginBottom</span>=<span class="string">"32dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginEnd</span>=<span class="string">"10dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:src</span>=<span class="string">"@drawable/icon_slash"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ScrollView</span>&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!-- 保存按钮 --&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">Button</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:id</span>=<span class="string">"@+id/user_save_button"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_height</span>=<span class="string">"wrap_content"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_alignParentBottom</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:background</span>=<span class="string">"@drawable/bg_button"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:text</span>=<span class="string">"保存"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:textColor</span>=<span class="string">"@drawable/selector_textcolor"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:textSize</span>=<span class="string">"16sp"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:visibility</span>=<span class="string">"visible"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>至此，<strong>我们完整地完成了图标的重制工作</strong>，本章的上半章到此结束。</p>
<p>重新运行一下app，你会发现它在真机上也能非常流畅地打开了，再也没有原先滑动时的卡顿感。</p>
<p>下面开始本章的下半章内容——<strong>文字头像的生成与加载。</strong></p>
<h1 id="3-文字头像的生成、保存与加载"><a href="#3-文字头像的生成、保存与加载" class="headerlink" title="3. 文字头像的生成、保存与加载"></a>3. 文字头像的生成、保存与加载</h1><h2 id="3-1-从用户的使用情景分析头像的来源"><a href="#3-1-从用户的使用情景分析头像的来源" class="headerlink" title="3.1. 从用户的使用情景分析头像的来源"></a>3.1. 从用户的使用情景分析头像的来源</h2><table>
<thead>
<tr>
<th>使用情景</th>
<th>图片来源</th>
<th>处理方法</th>
</tr>
</thead>
<tbody>
<tr>
<td>①用户点击外部相册，选择了一张照片</td>
<td>绝对路径文件</td>
<td>使用Glide加载</td>
</tr>
<tr>
<td>②用户输入标题文字，app根据文字匹配生成头像</td>
<td>无图片</td>
<td>使用CircleTextImageView的set属性来设置</td>
</tr>
<tr>
<td>③用户输入标题文字，app根据<strong>特定文字</strong>生成<strong>内置头像</strong></td>
<td>内置资源图片<code>@drawable/</code></td>
<td>使用CircleTextImageView的setResourceId来设置<br>或者使用Glide加载</td>
</tr>
</tbody>
</table>
<p>本章只制作第二个，其他都不做。也就是说本章只考虑如何根据标题文字来生成相应的“文字头像”，其他头像的生成方式会放在以后再讲。</p>
<h2 id="3-2-文字头像的整体实现思路"><a href="#3-2-文字头像的整体实现思路" class="headerlink" title="3.2. 文字头像的整体实现思路"></a>3.2. 文字头像的整体实现思路</h2><p><img src="http://ozurciydg.bkt.clouddn.com/17-12-4/24254815.jpg" alt=""></p>
<p>（注：“开始在画布上写字”是以前的想法，下面讲的是用CircleTextImageView的set属性来设置，比这个要简单一些。）</p>
<p>从上面这张图来看，我们生成的文字头像必须具有以下属性：</p>
<ol>
<li>文字内容（1字到多字均可）</li>
<li>文字大小（可不做）</li>
<li>文字颜色</li>
<li>背景填充色</li>
</ol>
<p>下面开始正式的制作过程：</p>
<h2 id="3-3-使用CircleTextImageView取代CircleImageView"><a href="#3-3-使用CircleTextImageView取代CircleImageView" class="headerlink" title="3.3. 使用CircleTextImageView取代CircleImageView"></a><strong>3.3. 使用CircleTextImageView取代CircleImageView</strong></h2><p><strong>1. 添加依赖库（把Android Studio的视图切换回Android目录视图）：</strong></p>
<p><code>app:build.gradle</code></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">dependencies &#123;</span><br><span class="line">    ...</span><br><span class="line">    compile <span class="string">'com.github.thinkcool:circletextimageview:1.0.20151218'</span></span><br><span class="line">    <span class="comment">// 另外此行可以删除了：</span></span><br><span class="line">    <span class="comment">// compile 'de.hdodenhof:circleimageview:2.2.0'</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>2. 替换之前的代码：</strong></p>
<p>2.1. <code>MainActivity.java</code>（这里看懂就好，待会儿会贴出整体的代码）</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">MainActivity</span> <span class="keyword">extends</span> <span class="title">AppCompatActivity</span> <span class="keyword">implements</span> <span class="title">View</span>.<span class="title">OnClickListener</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="comment">//以下变量是与右分页相关的控件</span></span><br><span class="line">    ...</span><br><span class="line">    <span class="keyword">private</span> CircleTextImageView userHead;</span><br><span class="line"></span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onCreate</span><span class="params">(Bundle savedInstanceState)</span> </span>&#123;</span><br><span class="line">        ...</span><br><span class="line">        <span class="comment">//用LayoutInflater来绑定布局</span></span><br><span class="line">        LayoutInflater inflater = getLayoutInflater();</span><br><span class="line">        page1 = inflater.inflate(R.layout.page_card_list, <span class="keyword">null</span>); <span class="comment">//预加载左分页</span></span><br><span class="line">        page2 = inflater.inflate(R.layout.page_card_new, <span class="keyword">null</span>); <span class="comment">//预加载右分页</span></span><br><span class="line">        </span><br><span class="line">        ...</span><br><span class="line"></span><br><span class="line">        <span class="comment">//绑定分页的按钮</span></span><br><span class="line">        ...</span><br><span class="line">        userHead = (CircleTextImageView) page2.findViewById(R.id.user_head);</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    ...</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>2.2. <code>page_card_new.xml</code></p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-11/35913994.jpg" alt=""></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">ScrollView</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line">            <span class="comment">&lt;!-- 头像的背景，根据头像主色调来生成（方法在函数中实现） --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_head_bg"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"108dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:background</span>=<span class="string">"@color/mycolorBackground2"</span> /&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!-- 使用开源控件CircleTextImageView制作圆形头像 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">com.thinkcool.circletextimageview.CircleTextImageView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/user_head"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"96dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"96dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_centerHorizontal</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginTop</span>=<span class="string">"60dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">app:citv_border_width</span>=<span class="string">"2dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">app:citv_border_color</span>=<span class="string">"@color/mycolorBackground"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:src</span>=<span class="string">"@drawable/avatar_test"</span> /&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="comment">&lt;!-- 常规表单填写 --&gt;</span></span><br><span class="line">            ...</span><br><span class="line">        <span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">ScrollView</span>&gt;</span></span><br><span class="line">    ...</span><br><span class="line"><span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>2.3. <code>SaveUserInfo.java</code></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> com.likianta.anykey;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> android.content.Context;</span><br><span class="line"><span class="keyword">import</span> android.content.SharedPreferences;</span><br><span class="line"><span class="keyword">import</span> android.view.View;</span><br><span class="line"><span class="keyword">import</span> android.view.inputmethod.InputMethodManager;</span><br><span class="line"><span class="keyword">import</span> android.widget.EditText;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> com.google.gson.Gson;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> de.hdodenhof.circleimageview.CircleImageView;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Created by Likianta_DoDoRa on 2017/11/27 0027.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">SaveUserInfo</span> <span class="keyword">extends</span> <span class="title">MainActivity</span> </span>&#123;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">private</span> EditText userTitle;</span><br><span class="line">    <span class="keyword">private</span> EditText userName;</span><br><span class="line">    <span class="keyword">private</span> EditText userPassword;</span><br><span class="line">    <span class="keyword">private</span> EditText userUrl;</span><br><span class="line">    <span class="keyword">private</span> EditText userNote;</span><br><span class="line">    <span class="keyword">private</span> CircleTextImageView userHead;</span><br><span class="line">    <span class="keyword">private</span> String uTitle;</span><br><span class="line">    <span class="keyword">private</span> String uName;</span><br><span class="line">    <span class="keyword">private</span> String uPassword;</span><br><span class="line">    <span class="keyword">private</span> String uUrl;</span><br><span class="line">    <span class="keyword">private</span> String uNote;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">private</span> Card card;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="title">SaveUserInfo</span><span class="params">(View pageview)</span> </span>&#123;</span><br><span class="line">        </span><br><span class="line">        LogUtil.d(<span class="string">"向SaveUserInfo（）传入右分页布局"</span>);</span><br><span class="line">        </span><br><span class="line">        userTitle = (EditText) pageview.findViewById(R.id.userTitle);</span><br><span class="line">        userName = (EditText) pageview.findViewById(R.id.userName);</span><br><span class="line">        userPassword = (EditText) pageview.findViewById(R.id.userPassword);</span><br><span class="line">        userUrl = (EditText) pageview.findViewById(R.id.userUrl);</span><br><span class="line">        userNote = (EditText) pageview.findViewById(R.id.userNote);</span><br><span class="line">        userHead = (CircleTextImageView) pageview.findViewById(R.id.userHead);</span><br><span class="line">    </span><br><span class="line">        uTitle = userTitle.getText().toString();</span><br><span class="line">        uName = userName.getText().toString();</span><br><span class="line">        uPassword = userPassword.getText().toString();</span><br><span class="line">        uUrl = userUrl.getText().toString();</span><br><span class="line">        uNote = userNote.getText().toString();</span><br><span class="line">        LogUtil.d(<span class="string">"User note is "</span> + uNote);</span><br><span class="line">        </span><br><span class="line">        getNewCard(); <span class="comment">//生成新卡片的操作</span></span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//检测保存时的标题栏的文字是否为空，空的话禁止保存并提醒填写</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">boolean</span> <span class="title">isTitleEmpty</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (uTitle.equals(<span class="string">""</span>)) &#123;</span><br><span class="line">            userTitle.setHint(<span class="string">"请输入标题"</span>);</span><br><span class="line">            userTitle.setFocusable(<span class="keyword">true</span>);</span><br><span class="line">            userTitle.setFocusableInTouchMode(<span class="keyword">true</span>);</span><br><span class="line">            userTitle.requestFocus();</span><br><span class="line">            </span><br><span class="line">            <span class="comment">//通过调用输入管理器来弹出软键盘</span></span><br><span class="line">            InputMethodManager inputMethodManager = (InputMethodManager) userTitle.getContext().getSystemService(Context.INPUT_METHOD_SERVICE);</span><br><span class="line">            inputMethodManager.showSoftInput(userTitle, <span class="number">0</span>);</span><br><span class="line">            <span class="keyword">return</span> <span class="keyword">true</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">false</span>;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> Card <span class="title">getNewCard</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        String uSummary = uName + <span class="string">"\n"</span> + uPassword + <span class="string">"\n"</span> + uNote; <span class="comment">//卡片的摘要=用户名+密码+备注</span></span><br><span class="line">        card = <span class="keyword">new</span> Card(uTitle, uSummary, uHead, resId); <span class="comment">//注意增加了两个属性：头像和resid</span></span><br><span class="line">        <span class="keyword">return</span> card;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>2.4. <code>card.xml</code></p>
<figure class="highlight xml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br></pre></td><td class="code"><pre><span class="line">&lt;?xml version="1.0" encoding="utf-8"?&gt;</span><br><span class="line"><span class="tag">&lt;<span class="name">android.support.v7.widget.CardView</span> <span class="attr">xmlns:android</span>=<span class="string">"http://schemas.android.com/apk/res/android"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">xmlns:app</span>=<span class="string">"http://schemas.android.com/apk/res-auto"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">xmlns:tools</span>=<span class="string">"http://schemas.android.com/tools"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_height</span>=<span class="string">"120dp"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:layout_margin</span>=<span class="string">"5dp"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">android:elevation</span>=<span class="string">"4dp"</span></span></span><br><span class="line"><span class="tag">    <span class="attr">app:cardCornerRadius</span>=<span class="string">"8dp"</span>&gt;</span></span><br><span class="line">    <span class="comment">&lt;!--elevation表示卡片的高度</span></span><br><span class="line"><span class="comment">     cardCornerRadius表示卡片四个角的弧度</span></span><br><span class="line"><span class="comment">     xmlns:tools用于识别TextView中的\n换行符--&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">&lt;!--CardView本身是一个FrameLayout，显然不适合摆放控件。</span></span><br><span class="line"><span class="comment">     因此为了充分利用空间，要内建一个RelativeLayout来盛放子控件--&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">RelativeLayout</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">        <span class="attr">android:layout_height</span>=<span class="string">"match_parent"</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!--首先思路就是把RelativeLayout分为左中右三个部分，左边贴一个头像；中间占的面积最大，用来写标题和摘要；右边则放置功能按钮--&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!--现在写的是中间的布局LinearLayout。在LinearLayout中上半部分显示标题，下半部分显示摘要--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">LinearLayout</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_marginEnd</span>=<span class="string">"40dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_marginStart</span>=<span class="string">"80dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:orientation</span>=<span class="string">"vertical"</span>&gt;</span></span><br><span class="line">            <span class="comment">&lt;!--注意设定LinearLayout的方向为vertical--&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!--标题，深色，字号较大，高度比重为40%--&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/cardTitle"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"0dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_weight</span>=<span class="string">"4"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:gravity</span>=<span class="string">"bottom"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:padding</span>=<span class="string">"4dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:text</span>=<span class="string">"TitleTest"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textColor</span>=<span class="string">"@color/mycolorText1"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:textSize</span>=<span class="string">"32sp"</span> /&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!--摘要，浅色或同色，字号比正常文字还要小，高度比重为60%，限制显示三行文字--&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/cardSummary"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"0dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_weight</span>=<span class="string">"6"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:ellipsize</span>=<span class="string">"end"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:lines</span>=<span class="string">"3"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:maxLines</span>=<span class="string">"3"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:text</span>=<span class="string">"name: ______\npassword: ______\nnote: this view limited 3 lines"</span> /&gt;</span></span><br><span class="line">            <span class="comment">&lt;!--maxLines表示最大行数，lines表示即使只有一行字也要占用三行字的高度空间，ellipsize表示多出的字数表示为省略号</span></span><br><span class="line"><span class="comment">            参考：http://blog.csdn.net/qq_31403303/article/details/51506524--&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;/<span class="name">LinearLayout</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!--接下来写的是右边的布局，也是LinearLayout布局。从上到下依次显示三个按钮：菜单、复制name、复制password--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">LinearLayout</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"40dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_alignParentEnd</span>=<span class="string">"true"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:orientation</span>=<span class="string">"vertical"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:padding</span>=<span class="string">"5dp"</span>&gt;</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">&lt;!--菜单按钮--&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/cardMenu"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"32dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"32dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:src</span>=<span class="string">"@drawable/icon_more"</span> /&gt;</span></span><br><span class="line">    </span><br><span class="line">            <span class="comment">&lt;!-- 复制用户名按钮 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/copyName"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"14dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"14dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_gravity</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginTop</span>=<span class="string">"22dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:src</span>=<span class="string">"@drawable/shape_oval1"</span> /&gt;</span></span><br><span class="line">    </span><br><span class="line">            <span class="comment">&lt;!-- 复制密码按钮 --&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">ImageView</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:id</span>=<span class="string">"@+id/copyPassword"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_width</span>=<span class="string">"14dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_height</span>=<span class="string">"14dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_gravity</span>=<span class="string">"center"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:layout_marginTop</span>=<span class="string">"16dp"</span></span></span><br><span class="line"><span class="tag">                <span class="attr">android:src</span>=<span class="string">"@drawable/shape_oval1"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="tag">&lt;/<span class="name">LinearLayout</span>&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 不要忘了左边部分。之所以留待最后才写，是为了让头像以及分割线最后加载，这样就处于其它二者的上方了 --&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- 先做分割线，非常细，非均等分割（上窄下宽） --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">TextView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"match_parent"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"0.4dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_marginTop</span>=<span class="string">"44dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:background</span>=<span class="string">"#000000"</span> /&gt;</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">&lt;!-- 头像 --&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">com.thinkcool.circletextimageview.CircleTextImageView</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:id</span>=<span class="string">"@+id/cardHead"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_width</span>=<span class="string">"60dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_height</span>=<span class="string">"60dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_marginStart</span>=<span class="string">"10dp"</span></span></span><br><span class="line"><span class="tag">            <span class="attr">android:layout_marginTop</span>=<span class="string">"16dp"</span> /&gt;</span></span><br><span class="line">    </span><br><span class="line">    <span class="tag">&lt;/<span class="name">RelativeLayout</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">android.support.v7.widget.CardView</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>至此，CircleTextImageView取代CircleImageView工作完成，下面开始实现头像的生成过程：</p>
<h2 id="3-4-生成右分页的头像"><a href="#3-4-生成右分页的头像" class="headerlink" title="3.4. 生成右分页的头像"></a>3.4. 生成右分页的头像</h2><p>先制作右分页的头像生成，然后在3.5章再制作<strong>按下保存按钮如何在左分页出现。</strong></p>
<h3 id="3-4-1-制作右分页的头像生成GenerateUserHead"><a href="#3-4-1-制作右分页的头像生成GenerateUserHead" class="headerlink" title="3.4.1. 制作右分页的头像生成GenerateUserHead"></a>3.4.1. 制作右分页的头像生成<code>GenerateUserHead</code></h3><p>新建<code>GenerateUserHead.java</code>：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> com.likianta.anykey;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> android.support.annotation.DrawableRes;</span><br><span class="line"><span class="keyword">import</span> android.support.v7.app.AppCompatActivity;</span><br><span class="line"><span class="keyword">import</span> android.view.View;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> com.thinkcool.circletextimageview.CircleTextImageView;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Created by Likianta_DoDoRa on 2017/12/5 0005.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">GenerateUserHead</span> <span class="keyword">extends</span> <span class="title">AppCompatActivity</span> </span>&#123;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 传入标题内容及头像view</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="title">GenerateUserHead</span><span class="params">(String content, CircleTextImageView userHead)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (!content.equals(<span class="string">""</span>)) &#123; <span class="comment">// 如果内容不为空，则执行以下方法（为空则什么都不做）</span></span><br><span class="line">            <span class="comment">// 判断标题字符串的长度（字数）</span></span><br><span class="line">            <span class="keyword">switch</span> (content.length()) &#123;</span><br><span class="line">                <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">                    <span class="comment">// 如果只有一个字，则无需检查例外规则，直接开始生成</span></span><br><span class="line">                    userHead.setImageDrawable(<span class="keyword">null</span>); <span class="comment">// 1. 设置头像为null</span></span><br><span class="line">                    userHead.setText(content); <span class="comment">// 2. 载入文本显示</span></span><br><span class="line">                    userHead.setTextSize(<span class="number">120</span>); <span class="comment">// 3. 设置文字大小</span></span><br><span class="line">                    userHead.setTextColor(<span class="number">0xffffffff</span>); <span class="comment">// 4. 设置文字颜色</span></span><br><span class="line">                    userHead.setFillColor(<span class="number">0xff000000</span>); <span class="comment">// 5. 设置背景填充色</span></span><br><span class="line">                    <span class="keyword">break</span>;</span><br><span class="line">                <span class="keyword">case</span> <span class="number">2</span>:</span><br><span class="line">                    <span class="comment">// 检查2字例外规则</span></span><br><span class="line">                    <span class="comment">// 本章不考虑，以后会补充上</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="comment">// 不符合例外，则执行以下方法</span></span><br><span class="line">                    userHead.setImageDrawable(<span class="keyword">null</span>);</span><br><span class="line">                    userHead.setText(content);</span><br><span class="line">                    userHead.setTextSize(<span class="number">120</span>);</span><br><span class="line">                    userHead.setTextColor(<span class="number">0xffffffff</span>);</span><br><span class="line">                    userHead.setFillColor(<span class="number">0xff000000</span>);</span><br><span class="line">                    <span class="keyword">break</span>;</span><br><span class="line">                <span class="keyword">default</span>:</span><br><span class="line">                    <span class="comment">// 检查多字例外规则</span></span><br><span class="line">                    <span class="comment">// 本章不考虑，以后会补充上</span></span><br><span class="line">                    </span><br><span class="line">                    <span class="comment">// 不符合例外，则执行以下方法</span></span><br><span class="line">                    userHead.setImageDrawable(<span class="keyword">null</span>);</span><br><span class="line">                    userHead.setText(content.substring(<span class="number">0</span>, <span class="number">2</span>));</span><br><span class="line">                    userHead.setTextSize(<span class="number">120</span>);</span><br><span class="line">                    userHead.setTextColor(<span class="number">0xffffffff</span>);</span><br><span class="line">                    userHead.setFillColor(<span class="number">0xff000000</span>);</span><br><span class="line">                    <span class="keyword">break</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">/**</span></span><br><span class="line"><span class="comment">     * Exceptional rules</span></span><br><span class="line"><span class="comment">     * if user input a title content equals to the built-in list, generate a special avatar instead of default text avatar</span></span><br><span class="line"><span class="comment">     */</span></span><br><span class="line">    </span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>在上面的代码中，我们设置了两个例外规则，为什么2字和多字的判断情况要分开呢？<br>因为2字的情况比较少，比如“QQ”、“B站”、“淘宝”等图标，除了这几个常用的基本上就没有什么需要判断的了；而多字的情况就比较复杂，特别是颜文字的处理，为了让它们能够较好的显示，可能需要更多操作，所以为了检查效率，二者将做分开处理。<br>另外例外规则方法将会返回一个resId值，我们就是依靠<strong>检查resId是否为0</strong>来识别card到底用的是文字头像还是图片头像的。</p>
<p>试着去运行一下，我们会发现输入文字后头像根本就没有改变。这是为什么呢？<br>因为我们忘了最基本的工作——在<code>MainActivity</code>中设置文本监听器：</p>
<h3 id="3-4-2-设置监听器"><a href="#3-4-2-设置监听器" class="headerlink" title="3.4.2. 设置监听器"></a>3.4.2. 设置监听器</h3><p>为了让头像能够在输入标题内容后及时地生成，我们至少需要设置4个监听器，一旦监听器被触发，就使用<code>GenerateUserHead</code>方法生成头像：</p>
<ol>
<li>userTitle编辑框设置keyListener，监听用户按下Enter键的操作</li>
<li>有些用户不喜欢按Enter键换到下一个编辑框，所以会无法触发第一个。因此需要给下面的userName编辑框设置FocusListener</li>
<li>有些用户可能不需要设置帐号，也有不需要设置密码的情况；但作为常识，一个密码至少会有帐号或者密码其中之一被填写，所以给userPassword也设置一个FocusListener</li>
<li>当然，如果上述情况真的发生了（帐号、密码都是空的），我们也要做一个保底的方法，那就是给userSaveButton设置一个ClickListener。尽管这个已经做不到“及时地生成头像”，但它能保证头像肯定会生成</li>
</ol>
<p>所以我们要在MainActivity中完成这四个监听工作：</p>
<p><code>MainActivity.java</code>（整体代码如下）</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> com.likianta.anykey;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> android.content.Context;</span><br><span class="line"><span class="keyword">import</span> android.content.Intent;</span><br><span class="line"><span class="keyword">import</span> android.support.v4.view.PagerAdapter;</span><br><span class="line"><span class="keyword">import</span> android.support.v4.view.ViewPager;</span><br><span class="line"><span class="keyword">import</span> android.support.v7.app.AppCompatActivity;</span><br><span class="line"><span class="keyword">import</span> android.os.Bundle;</span><br><span class="line"><span class="keyword">import</span> android.support.v7.widget.LinearLayoutManager;</span><br><span class="line"><span class="keyword">import</span> android.support.v7.widget.RecyclerView;</span><br><span class="line"><span class="keyword">import</span> android.view.LayoutInflater;</span><br><span class="line"><span class="keyword">import</span> android.view.View;</span><br><span class="line"><span class="keyword">import</span> android.view.ViewGroup;</span><br><span class="line"><span class="keyword">import</span> android.view.WindowManager;</span><br><span class="line"><span class="keyword">import</span> android.view.inputmethod.InputMethodManager;</span><br><span class="line"><span class="keyword">import</span> android.widget.Button;</span><br><span class="line"><span class="keyword">import</span> android.widget.EditText;</span><br><span class="line"><span class="keyword">import</span> android.widget.ImageView;</span><br><span class="line"><span class="keyword">import</span> android.widget.TextView;</span><br><span class="line"><span class="keyword">import</span> android.widget.Toast;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> com.thinkcool.circletextimageview.CircleTextImageView;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> java.util.ArrayList;</span><br><span class="line"><span class="keyword">import</span> java.util.List;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> me.relex.circleindicator.CircleIndicator;</span><br><span class="line"></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">MainActivity</span> <span class="keyword">extends</span> <span class="title">AppCompatActivity</span> <span class="keyword">implements</span> <span class="title">View</span>.<span class="title">OnClickListener</span> </span>&#123;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//以下变量是与分页相关的变量</span></span><br><span class="line">    <span class="keyword">private</span> TextView titleAll; <span class="comment">//标题文字“全部”</span></span><br><span class="line">    <span class="keyword">private</span> TextView titleNew; <span class="comment">//标题文字“新增”</span></span><br><span class="line">    <span class="keyword">private</span> CircleIndicator indicator; <span class="comment">//滚动指示器</span></span><br><span class="line">    <span class="keyword">private</span> View page1; <span class="comment">//左分页</span></span><br><span class="line">    <span class="keyword">private</span> View page2; <span class="comment">//右分页</span></span><br><span class="line">    <span class="keyword">private</span> ViewPager viewPager; <span class="comment">//控制分页逻辑的容器</span></span><br><span class="line">    <span class="keyword">private</span> ArrayList&lt;View&gt; pageList; <span class="comment">//装载分页元素的容器</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">//以下变量是与左分页相关的控件</span></span><br><span class="line">    <span class="keyword">private</span> RecyclerView recyclerView; <span class="comment">//卡片列表</span></span><br><span class="line">    <span class="keyword">private</span> CardAdapter cardAdapter;</span><br><span class="line">    <span class="keyword">private</span> List&lt;Card&gt; cardList = <span class="keyword">new</span> ArrayList&lt;Card&gt;(); <span class="comment">//卡片数据</span></span><br><span class="line">    </span><br><span class="line">    <span class="comment">//以下变量是与右分页相关的控件</span></span><br><span class="line">    <span class="keyword">private</span> EditText userTitle;</span><br><span class="line">    <span class="keyword">private</span> EditText userName;</span><br><span class="line">    <span class="keyword">private</span> EditText userPassword;</span><br><span class="line">    <span class="keyword">private</span> EditText userUrl;</span><br><span class="line">    <span class="keyword">private</span> EditText userNote;</span><br><span class="line">    <span class="keyword">private</span> CircleTextImageView userHead;</span><br><span class="line">    <span class="keyword">private</span> Button userSaveButton;</span><br><span class="line">    </span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">protected</span> <span class="keyword">void</span> <span class="title">onCreate</span><span class="params">(Bundle savedInstanceState)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">super</span>.onCreate(savedInstanceState);</span><br><span class="line">        setContentView(R.layout.activity_main);</span><br><span class="line">        </span><br><span class="line">        <span class="comment">/*</span></span><br><span class="line"><span class="comment">         * 强制隐藏软键盘</span></span><br><span class="line"><span class="comment">         * 由于刚一进入主界面，右分页的编辑框会率先获取焦点并唤起软键盘，对用户体验造成影响，因此在一开始就把软键盘给强制隐藏掉</span></span><br><span class="line"><span class="comment">         * http://blog.csdn.net/Vivian8725118/article/details/23184501</span></span><br><span class="line"><span class="comment">         */</span></span><br><span class="line">        getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_HIDDEN);</span><br><span class="line">        </span><br><span class="line">        <span class="comment">//开始绑定主界面的按钮</span></span><br><span class="line">        viewPager = (ViewPager) findViewById(R.id.viewPager);</span><br><span class="line">        titleAll = (TextView) findViewById(R.id.title_all);</span><br><span class="line">        titleNew = (TextView) findViewById(R.id.title_new);</span><br><span class="line">        indicator = (CircleIndicator) findViewById(R.id.indicator);</span><br><span class="line">        </span><br><span class="line">        <span class="comment">//用LayoutInflater来绑定布局</span></span><br><span class="line">        LayoutInflater inflater = getLayoutInflater();</span><br><span class="line">        page1 = inflater.inflate(R.layout.page_card_list, <span class="keyword">null</span>); <span class="comment">//预加载左分页</span></span><br><span class="line">        page2 = inflater.inflate(R.layout.page_card_new, <span class="keyword">null</span>); <span class="comment">//预加载右分页</span></span><br><span class="line">        pageList = <span class="keyword">new</span> ArrayList&lt;View&gt;(); <span class="comment">//pageList被实例化为装载View元素的数组</span></span><br><span class="line">        pageList.add(page1);</span><br><span class="line">        pageList.add(page2);</span><br><span class="line">        <span class="comment">//add的先后顺序不要搞错，先add的就是array[0]位置的元素了</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">//绑定分页的按钮</span></span><br><span class="line">        recyclerView = (RecyclerView) page1.findViewById(R.id.recyclerView);</span><br><span class="line">        userTitle = (EditText) page2.findViewById(R.id.user_title);</span><br><span class="line">        userName = (EditText) page2.findViewById(R.id.user_name);</span><br><span class="line">        userPassword = (EditText) page2.findViewById(R.id.user_password);</span><br><span class="line">        userUrl = (EditText) page2.findViewById(R.id.user_url);</span><br><span class="line">        userNote = (EditText) page2.findViewById(R.id.user_note);</span><br><span class="line">        userHead = (CircleTextImageView) page2.findViewById(R.id.user_head);</span><br><span class="line">        <span class="comment">//绑定小按钮</span></span><br><span class="line">        ImageView userTitleButton = (ImageView) page2.findViewById(R.id.user_title_button);</span><br><span class="line">        ImageView userNameButton = (ImageView) page2.findViewById(R.id.user_name_button);</span><br><span class="line">        ImageView userPasswordButton = (ImageView) page2.findViewById(R.id.user_password_button);</span><br><span class="line">        ImageView userBoundButton = (ImageView) page2.findViewById(R.id.user_bound_button);</span><br><span class="line">        ImageView userUrlButton = (ImageView) page2.findViewById(R.id.user_url_button);</span><br><span class="line">        ImageView userNoteButton = (ImageView) page2.findViewById(R.id.user_note_button);</span><br><span class="line">        userSaveButton = (Button) page2.findViewById(R.id.user_save_button);</span><br><span class="line">        </span><br><span class="line">        <span class="comment">//初始化左分页</span></span><br><span class="line">        initPager1();</span><br><span class="line">        <span class="comment">//初始化右分页（在onCreate方法中没必要做。在点击保存按钮后使用该方法来清空右分页的表单编辑框）</span></span><br><span class="line">        <span class="comment">//initPager2();</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">//监听按钮点击</span></span><br><span class="line">        <span class="comment">//顶部的指示器文字被点击</span></span><br><span class="line">        titleAll.setOnClickListener(<span class="keyword">this</span>);</span><br><span class="line">        titleNew.setOnClickListener(<span class="keyword">this</span>);</span><br><span class="line">        <span class="comment">//右分页的小按钮被点击（相关事件还没有做）</span></span><br><span class="line">        userTitleButton.setOnClickListener(<span class="keyword">this</span>);</span><br><span class="line">        userNameButton.setOnClickListener(<span class="keyword">this</span>);</span><br><span class="line">        userPasswordButton.setOnClickListener(<span class="keyword">this</span>);</span><br><span class="line">        userBoundButton.setOnClickListener(<span class="keyword">this</span>);</span><br><span class="line">        userUrlButton.setOnClickListener(<span class="keyword">this</span>);</span><br><span class="line">        userNoteButton.setOnClickListener(<span class="keyword">this</span>);</span><br><span class="line">        userSaveButton.setOnClickListener(<span class="keyword">this</span>);</span><br><span class="line"></span><br><span class="line">        <span class="comment">//帐号编辑框监听器（触发生成右分页头像）</span></span><br><span class="line">        userName.setOnFocusChangeListener(<span class="keyword">new</span> View.OnFocusChangeListener() &#123;</span><br><span class="line">            <span class="meta">@Override</span></span><br><span class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onFocusChange</span><span class="params">(View v, <span class="keyword">boolean</span> hasFocus)</span> </span>&#123;</span><br><span class="line">                <span class="keyword">if</span> (hasFocus) &#123;</span><br><span class="line">                    <span class="keyword">new</span> GenerateUserHead(userTitle.getText().toString(), userHead);</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;);</span><br><span class="line">        <span class="comment">//密码编辑框监听器（触发生成右分页头像）</span></span><br><span class="line">        userPassword.setOnFocusChangeListener(<span class="keyword">new</span> View.OnFocusChangeListener() &#123;</span><br><span class="line">            <span class="meta">@Override</span></span><br><span class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onFocusChange</span><span class="params">(View v, <span class="keyword">boolean</span> hasFocus)</span> </span>&#123;</span><br><span class="line">                <span class="keyword">if</span> (hasFocus) &#123;</span><br><span class="line">                    <span class="keyword">new</span> GenerateUserHead(userTitle.getText().toString(), userHead);</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;);</span><br><span class="line">        </span><br><span class="line">        <span class="comment">//test...</span></span><br><span class="line">        Button test = (Button) findViewById(R.id.test);</span><br><span class="line">        test.setOnClickListener(<span class="keyword">this</span>);</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//初始化左分页</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">initPager1</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        PagerAdapter pagerAdapter = <span class="keyword">new</span> PagerAdapter() &#123;</span><br><span class="line">            <span class="comment">//https://www.cnblogs.com/weixing/archive/2013/10/11/3363951.html</span></span><br><span class="line">            </span><br><span class="line">            <span class="comment">//获取页卡总数量</span></span><br><span class="line">            <span class="meta">@Override</span></span><br><span class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getCount</span><span class="params">()</span> </span>&#123;</span><br><span class="line">                <span class="keyword">return</span> pageList.size();</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            <span class="comment">//判断是否由对象生成界面，这个很重要，是用来把pageView数组中的page1和page2生成到当前布局中的方法</span></span><br><span class="line">            <span class="meta">@Override</span></span><br><span class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">boolean</span> <span class="title">isViewFromObject</span><span class="params">(View view, Object object)</span> </span>&#123;</span><br><span class="line">                <span class="keyword">return</span> view == object;</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            <span class="comment">//使从ViewGroup中移出当前View</span></span><br><span class="line">            <span class="meta">@Override</span></span><br><span class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">destroyItem</span><span class="params">(ViewGroup arg0, <span class="keyword">int</span> arg1, Object arg2)</span> </span>&#123;</span><br><span class="line">                ((ViewPager) arg0).removeView(pageList.get(arg1));</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">            <span class="comment">//返回一个对象，这个对象表明了PagerAdapter适配器选择哪个对象放在当前的ViewPager中</span></span><br><span class="line">            <span class="meta">@Override</span></span><br><span class="line">            <span class="function"><span class="keyword">public</span> Object <span class="title">instantiateItem</span><span class="params">(ViewGroup arg0, <span class="keyword">int</span> arg1)</span> </span>&#123;</span><br><span class="line">                <span class="comment">//这个方法用来实例化页卡</span></span><br><span class="line">                ((ViewPager) arg0).addView(pageList.get(arg1));</span><br><span class="line">                <span class="keyword">return</span> pageList.get(arg1);</span><br><span class="line">            &#125;</span><br><span class="line">            </span><br><span class="line">        &#125;;</span><br><span class="line">        viewPager.setAdapter(pagerAdapter); <span class="comment">//绑定适配器</span></span><br><span class="line">        indicator.setViewPager(viewPager); <span class="comment">//装载indicator</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">//设置viewPager的初始界面为第一个界面</span></span><br><span class="line">        viewPager.setCurrentItem(<span class="number">0</span>); <span class="comment">//这里的0对应的是viewPager[0]，也就是page1了</span></span><br><span class="line">        <span class="comment">//添加切换界面的监听器</span></span><br><span class="line">        viewPager.addOnPageChangeListener(<span class="keyword">new</span> MyOnPageChangeListener());</span><br><span class="line">        </span><br><span class="line">        <span class="comment">//为左分页加载卡片列表</span></span><br><span class="line">        PageRender();</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//初始化右分页</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">initPager2</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        userTitle.setText(<span class="string">""</span>);</span><br><span class="line">        userName.setText(<span class="string">""</span>);</span><br><span class="line">        userPassword.setText(<span class="string">""</span>);</span><br><span class="line">        userUrl.setText(<span class="string">""</span>);</span><br><span class="line">        userNote.setText(<span class="string">""</span>);</span><br><span class="line">        </span><br><span class="line">        <span class="comment">// 本来想在这里设置头像初始化为默认头像的，但不知道什么原因，如果在此处重置头像为默认，会发现左分页的卡片头像也会“突变”为默认</span></span><br><span class="line">        <span class="comment">// 而把重置头像的业务放到页面监听里面就不会引起此bug，所以不得已把头像重置的代码放到MyOnPageChangeListener的case1里面了</span></span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//渲染分页</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">PageRender</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        </span><br><span class="line">        cardList = <span class="keyword">new</span> SavedToMySharedPrefs(MainActivity.<span class="keyword">this</span>, <span class="string">"card_data"</span>).getCardData();</span><br><span class="line">        cardAdapter = <span class="keyword">new</span> CardAdapter(cardList); <span class="comment">//将数组数据适配为卡片数据</span></span><br><span class="line">        recyclerView.setLayoutManager(<span class="keyword">new</span> LinearLayoutManager(<span class="keyword">this</span>)); <span class="comment">//为recyclerView设置线性布局，使内部元素呈线性排列</span></span><br><span class="line">        recyclerView.setAdapter(cardAdapter); <span class="comment">//开始加载卡片</span></span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onClick</span><span class="params">(View view)</span> </span>&#123;</span><br><span class="line">        <span class="comment">// 监听事件合集</span></span><br><span class="line">        <span class="keyword">switch</span> (view.getId()) &#123;</span><br><span class="line">            <span class="keyword">case</span> R.id.title_all:</span><br><span class="line">                viewPager.setCurrentItem(<span class="number">0</span>);</span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">            <span class="keyword">case</span> R.id.title_new:</span><br><span class="line">                viewPager.setCurrentItem(<span class="number">1</span>);</span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">            <span class="keyword">case</span> R.id.user_save_button:</span><br><span class="line">                <span class="comment">//点击右分页的保存按钮</span></span><br><span class="line">                LogUtil.d(<span class="string">"ma You clicked user_save_button button."</span>);</span><br><span class="line">                </span><br><span class="line">                <span class="comment">//首先判断标题是不是空的，空的话必须填写标题，其他字段则允许为空</span></span><br><span class="line">                <span class="keyword">if</span> (<span class="keyword">new</span> SaveUserInfo(MainActivity.<span class="keyword">this</span>).isTitleEmpty(userTitle)) &#123;</span><br><span class="line">                    Toast.makeText(MainActivity.<span class="keyword">this</span>, <span class="string">"标题不能为空！"</span>, Toast.LENGTH_SHORT).show();</span><br><span class="line">                    <span class="keyword">break</span>;</span><br><span class="line">                &#125;</span><br><span class="line">                <span class="comment">//保底操作，确保生成了右分页头像</span></span><br><span class="line">                <span class="keyword">new</span> GenerateUserHead(userTitle.getText().toString(), userHead);</span><br><span class="line">                </span><br><span class="line">                Card card = <span class="keyword">new</span> SaveUserInfo(page2).getNewCard();</span><br><span class="line">                cardList.add(<span class="number">0</span>, card); <span class="comment">//在零号位（也就是第一位）添加这张新卡片</span></span><br><span class="line">                cardAdapter.notifyItemInserted(<span class="number">0</span>); <span class="comment">//添加后要给RecyclerView释放一个更新信号。具体方法写在CardAdapter.java里</span></span><br><span class="line">                viewPager.setCurrentItem(<span class="number">0</span>); <span class="comment">//自动跳转到左分页</span></span><br><span class="line">                recyclerView.scrollToPosition(<span class="number">0</span>); <span class="comment">//自动跳转到列表首部，方便用户看到自己新增的卡片</span></span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">            <span class="comment">//test...</span></span><br><span class="line">            <span class="keyword">case</span> R.id.test:</span><br><span class="line">                <span class="keyword">new</span> SavedToMySharedPrefs(MainActivity.<span class="keyword">this</span>,<span class="string">"card_data"</span>).setCardData(cardList);</span><br><span class="line">                MainActivity.<span class="keyword">this</span>.finish();</span><br><span class="line">                <span class="keyword">break</span>;</span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onDestroy</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">super</span>.onDestroy();</span><br><span class="line">        </span><br><span class="line">        <span class="comment">// Save all data.</span></span><br><span class="line">        <span class="keyword">new</span> SavedToMySharedPrefs(MainActivity.<span class="keyword">this</span>, <span class="string">"card_data"</span>).setCardData(cardDataList);</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//页面滚动监听器功能，实现标签页左右滑动切换效果</span></span><br><span class="line">    <span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">MyOnPageChangeListener</span> <span class="keyword">implements</span> <span class="title">ViewPager</span>.<span class="title">OnPageChangeListener</span> </span>&#123;</span><br><span class="line">        </span><br><span class="line">        <span class="meta">@Override</span></span><br><span class="line">        <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onPageSelected</span><span class="params">(<span class="keyword">int</span> index)</span> </span>&#123;</span><br><span class="line">            <span class="keyword">switch</span> (index) &#123;</span><br><span class="line">                <span class="keyword">case</span> <span class="number">0</span>:</span><br><span class="line">                    titleAll.setTextColor(<span class="number">0xff000000</span>);<span class="comment">//0x表示整型，ff表示透明度为0，最后的6位数字表示颜色，必须这样写，不能省略</span></span><br><span class="line">                    titleNew.setTextColor(<span class="number">0xff8e8e8e</span>);</span><br><span class="line">                    InputMethodManager inputMethodManager = (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);</span><br><span class="line">                    inputMethodManager.hideSoftInputFromWindow(MainActivity.<span class="keyword">this</span>.getCurrentFocus().getWindowToken(), <span class="number">0</span>); <span class="comment">//强制隐藏软键盘</span></span><br><span class="line">                    <span class="keyword">break</span>;</span><br><span class="line">                <span class="keyword">case</span> <span class="number">1</span>:</span><br><span class="line">                    titleNew.setTextColor(<span class="number">0xff000000</span>);</span><br><span class="line">                    titleAll.setTextColor(<span class="number">0xff8e8e8e</span>);</span><br><span class="line">                    </span><br><span class="line">                    userHead.setText(<span class="string">""</span>);</span><br><span class="line">                    userHead.setImageResource(R.drawable.avatar_test);</span><br><span class="line">                    <span class="keyword">break</span>;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">        <span class="meta">@Override</span></span><br><span class="line">        <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onPageScrolled</span><span class="params">(<span class="keyword">int</span> arg0, <span class="keyword">float</span> arg1, <span class="keyword">int</span> arg2)</span> </span>&#123;</span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">        <span class="meta">@Override</span></span><br><span class="line">        <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onPageScrollStateChanged</span><span class="params">(<span class="keyword">int</span> arg0)</span> </span>&#123;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>PS：这里我没有写userTitle的按键监听器，因为它会造成无法自动跳转到下一个编辑框的问题。<br>注（2017年12月11日）：该问题已查明原因，具体可以看章末的更新修复章节4.1小结。</p>
<h2 id="3-5-使头像在左分页相应卡片中出现"><a href="#3-5-使头像在左分页相应卡片中出现" class="headerlink" title="3.5. 使头像在左分页相应卡片中出现"></a>3.5. 使头像在左分页相应卡片中出现</h2><p>要想使左分页新卡片的加载，我们需要改动Card和CardAdapter，前者负责提供头像接口，后者负责头像数据的接入。</p>
<h3 id="3-5-1-完善Card属性"><a href="#3-5-1-完善Card属性" class="headerlink" title="3.5.1. 完善Card属性"></a>3.5.1. 完善Card属性</h3><p>还记得前几章我们一直在用的卡片吗？这个典型的java bean里面只包含了两个属性——标题（String）和摘要（String）。<br>本章我们要给它增加一个头像属性（circleTextImageView）。</p>
<p><code>Card.java</code></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> com.likianta.anykey;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> com.thinkcool.circletextimageview.CircleTextImageView;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Created by Likianta_DoDoRa on 2017/11/21 0021.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">Card</span> </span>&#123;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">private</span> String cardTitle; <span class="comment">// 卡片标题</span></span><br><span class="line">    <span class="keyword">private</span> String cardSummary; <span class="comment">// 卡片的摘要内容（摘要=用户名+密码+备注）</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">// 头像相关</span></span><br><span class="line">    <span class="comment">// 本章（07章）只制作文字头像，不制作资源头像</span></span><br><span class="line">    <span class="keyword">private</span> String cardHeadText;</span><br><span class="line">    <span class="keyword">private</span> <span class="keyword">int</span> cardHeadTextColor;</span><br><span class="line">    <span class="keyword">private</span> <span class="keyword">int</span> cardHeadFillColor;</span><br><span class="line">    <span class="keyword">private</span> <span class="keyword">int</span> cardHeadResId = <span class="number">0</span>; <span class="comment">// 因为用不到资源图片，所以默认值设为0</span></span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="title">Card</span><span class="params">(String cardTitle, String cardSummary, CircleTextImageView cardHead, <span class="keyword">int</span> resId)</span> </span>&#123;</span><br><span class="line">        <span class="comment">// 将外界传入的参数赋值给Card内部类</span></span><br><span class="line">        <span class="keyword">this</span>.cardTitle = cardTitle;</span><br><span class="line">        <span class="keyword">this</span>.cardSummary = cardSummary;</span><br><span class="line">        <span class="keyword">if</span> (resId == <span class="number">0</span>) &#123; <span class="comment">// 判断资源id，如果是默认值，那么就按“文字头像”属性处理</span></span><br><span class="line">            cardHeadText = cardHead.getTextString();</span><br><span class="line">            cardHeadTextColor = cardHead.getTextColor();</span><br><span class="line">            cardHeadFillColor = cardHead.getFillColor();</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123; <span class="comment">// 如果资源id不为0，,则表示它是资源图片；不过本章只是先写全这个判断而已，后面并不会用到这个else情况</span></span><br><span class="line">            cardHeadResId = resId;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getCardHeadResId</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> cardHeadResId;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setCardHeadResId</span><span class="params">(<span class="keyword">int</span> cardHeadResId)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.cardHeadResId = cardHeadResId;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> String <span class="title">getCardHeadText</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> cardHeadText;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setCardHeadText</span><span class="params">(String cardHeadText)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.cardHeadText = cardHeadText;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getCardHeadTextColor</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> cardHeadTextColor;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setCardHeadTextColor</span><span class="params">(<span class="keyword">int</span> cardHeadTextColor)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.cardHeadTextColor = cardHeadTextColor;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getCardHeadFillColor</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> cardHeadFillColor;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setCardHeadFillColor</span><span class="params">(<span class="keyword">int</span> cardHeadFillColor)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.cardHeadFillColor = cardHeadFillColor;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> String <span class="title">getCardSummary</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> cardSummary;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setCardSummary</span><span class="params">(String cardSummary)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.cardSummary = cardSummary;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> String <span class="title">getCardTitle</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> cardTitle;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">setCardTitle</span><span class="params">(String cardTitle)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.cardTitle = cardTitle;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="3-5-2-CardAdapter"><a href="#3-5-2-CardAdapter" class="headerlink" title="3.5.2. CardAdapter"></a>3.5.2. <code>CardAdapter</code></h3><p><code>CardAdapter</code>着重修改了onBind的内容，另外<code>static class CardViewHolder</code>也有轻微的改动，其他基本上没有变动。整体代码如下：</p>
<p><code>CardAdapter.java</code></p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">package</span> com.likianta.anykey;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> android.content.Context;</span><br><span class="line"><span class="keyword">import</span> android.support.v7.widget.CardView;</span><br><span class="line"><span class="keyword">import</span> android.support.v7.widget.RecyclerView;</span><br><span class="line"><span class="keyword">import</span> android.view.LayoutInflater;</span><br><span class="line"><span class="keyword">import</span> android.view.View;</span><br><span class="line"><span class="keyword">import</span> android.view.ViewGroup;</span><br><span class="line"><span class="keyword">import</span> android.widget.TextView;</span><br><span class="line"><span class="keyword">import</span> android.widget.Toast;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> com.thinkcool.circletextimageview.CircleTextImageView;</span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> java.util.List;</span><br><span class="line"></span><br><span class="line"><span class="comment">/**</span></span><br><span class="line"><span class="comment"> * Created by Likianta_DoDoRa on 2017/11/21 0021.</span></span><br><span class="line"><span class="comment"> */</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">CardAdapter</span> <span class="keyword">extends</span> <span class="title">RecyclerView</span>.<span class="title">Adapter</span>&lt;<span class="title">CardAdapter</span>.<span class="title">CardViewHolder</span>&gt; </span>&#123;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">private</span> List&lt;Card&gt; cardList;</span><br><span class="line">    <span class="keyword">private</span> Context context; <span class="comment">// 定义一个context，由于没有赋值，所以现在是null的状态</span></span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="title">CardAdapter</span><span class="params">(List&lt;Card&gt; cardList)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.cardList = cardList;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> CardViewHolder <span class="title">onCreateViewHolder</span><span class="params">(ViewGroup parent, <span class="keyword">int</span> viewType)</span> </span>&#123;</span><br><span class="line">        <span class="comment">// 首先传入context</span></span><br><span class="line">        <span class="keyword">if</span> (context == <span class="keyword">null</span>) &#123;</span><br><span class="line">            context = parent.getContext(); <span class="comment">// 这里的parent就是指列表页(RecyclerView)所属的类了</span></span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">        View card = LayoutInflater.from(context).inflate(R.layout.card, parent, <span class="keyword">false</span>);</span><br><span class="line">        <span class="comment">// inflate的第三个参数表示是否连接该布局和父控件。由于系统已经插入了这个布局到父控件，所以设为false（若写true则会产生一个多余的parent）</span></span><br><span class="line">        </span><br><span class="line">        <span class="keyword">return</span> <span class="keyword">new</span> CardViewHolder(card); <span class="comment">// 获得了一张白卡</span></span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">// 开始给白卡绑数据</span></span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onBindViewHolder</span><span class="params">(CardViewHolder whiteCard, <span class="keyword">int</span> position)</span> </span>&#123;</span><br><span class="line">        Card card = cardList.get(position); <span class="comment">// 通过位置参数判断用户点的是哪个卡片</span></span><br><span class="line">        </span><br><span class="line">        <span class="comment">// 设置标题文字和摘要文字，比较好理解</span></span><br><span class="line">        whiteCard.cardTitle.setText(card.getCardTitle());</span><br><span class="line">        whiteCard.cardSummary.setText(card.getCardSummary());</span><br><span class="line">        </span><br><span class="line">        <span class="comment">// 关键在于这里，判断resId的值</span></span><br><span class="line">        <span class="keyword">if</span> (card.getCardHeadResId() == <span class="number">0</span>) &#123;</span><br><span class="line">            whiteCard.cardHead.setText(card.getCardHeadText());</span><br><span class="line">            whiteCard.cardHead.setTextSize(<span class="number">60</span>);</span><br><span class="line">            whiteCard.cardHead.setTextColor(card.getCardHeadTextColor());</span><br><span class="line">            whiteCard.cardHead.setFillColor(card.getCardHeadFillColor());</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            whiteCard.cardHead.setImageResource(card.getCardHeadResId());</span><br><span class="line">            <span class="comment">// 当然这里也可以采用Glide来加载</span></span><br><span class="line">        &#125;</span><br><span class="line">        </span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="comment">//获取列表中卡片总数量</span></span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">int</span> <span class="title">getItemCount</span><span class="params">()</span> </span>&#123;</span><br><span class="line">        <span class="keyword">return</span> cardList.size();</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">add</span><span class="params">(<span class="keyword">int</span> position, Card card)</span> </span>&#123;</span><br><span class="line">        cardList.add(position, card);</span><br><span class="line">        notifyItemInserted(position);</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">remove</span><span class="params">(Context context, <span class="keyword">int</span> position)</span> </span>&#123;</span><br><span class="line">        <span class="keyword">if</span> (position &lt; <span class="number">0</span>) &#123;</span><br><span class="line">            Toast.makeText(context, <span class="string">"列表中并没有结果!"</span>, Toast.LENGTH_SHORT).show();</span><br><span class="line">        &#125; <span class="keyword">else</span> &#123;</span><br><span class="line">            cardList.remove(position);</span><br><span class="line">            notifyItemRemoved(position);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">    <span class="keyword">static</span> <span class="class"><span class="keyword">class</span> <span class="title">CardViewHolder</span> <span class="keyword">extends</span> <span class="title">RecyclerView</span>.<span class="title">ViewHolder</span> </span>&#123;</span><br><span class="line">        </span><br><span class="line">        CardView cardView;</span><br><span class="line">        TextView cardTitle;</span><br><span class="line">        TextView cardSummary;</span><br><span class="line">        CircleTextImageView cardHead;</span><br><span class="line">        </span><br><span class="line">        <span class="function"><span class="keyword">public</span> <span class="title">CardViewHolder</span><span class="params">(View view)</span> </span>&#123;</span><br><span class="line">            <span class="comment">//引入外界的item，在本类中开始实例化</span></span><br><span class="line">            <span class="keyword">super</span>(view);</span><br><span class="line">            </span><br><span class="line">            cardView = (CardView) view;</span><br><span class="line">            cardTitle = (TextView) view.findViewById(R.id.cardTitle);</span><br><span class="line">            cardSummary = (TextView) view.findViewById(R.id.cardSummary);</span><br><span class="line">            cardHead = (CircleTextImageView) view.findViewById(R.id.cardHead);</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p><strong>至此代码的编写工作已经全部完成。</strong></p>
<p>整理一下思路，我们点击保存按钮，<code>MainActivity</code>的这个地方开始工作：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-11/95314735.jpg" alt=""></p>
<p>里面调用了<code>SaveUserInfo</code>类，并get到相应的card，然后加载并通知RecyclerView更新，左分页的活动就圆满完成了。<br>另外，此时再左滑回到右分页，会发现右分页的头像被重置为了默认的头像，这是因为<code>MainActivity</code>中的ViewPager起了作用：</p>
<p><img src="http://ozurciydg.bkt.clouddn.com/17-12-11/67724026.jpg" alt=""></p>
<p><br></p>
<p>本章内容到此结束。下章将会实现Anykey的分组功能。</p>
<hr>
<h1 id="4-更新修复"><a href="#4-更新修复" class="headerlink" title="4. 更新修复"></a>4. 更新修复</h1><p>下面是对上一章节代码细节的修复和改善：</p>
<h2 id="4-1-解决在登录界面按Enter键登录事件被连续触发两次的bug"><a href="#4-1-解决在登录界面按Enter键登录事件被连续触发两次的bug" class="headerlink" title="4.1. 解决在登录界面按Enter键登录事件被连续触发两次的bug"></a>4.1. 解决在登录界面按Enter键登录事件被连续触发两次的bug</h2><p>这是因为键盘动作的监听条件没有判断好造成的。<br>特别值得注意的是，<strong>手指在键盘上的一个动作是被当成<code>ACTION_DOWN</code>和<code>ACTION_UP</code>两个事件考虑的。</strong></p>
<blockquote>
<p>如果ACTION_DOWN事件发生在某个View的范围之内，则后续的ACTION_MOVE，ACTION_UP和ACTION_CANCEL等事件都将被发往该View，即使事件已经出界了。</p>
</blockquote>
<p>也就是说之前我们判断按下Enter会<code>callOnClick()</code>，如果不指明<code>ACTION_DOWN</code>或<code>ACTION_UP</code>，则会被连续执行两次！</p>
<p>因此修改<code>LoginActivity</code>如下：</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">public</span> <span class="class"><span class="keyword">class</span> <span class="title">LoginActivity</span> <span class="keyword">extends</span> <span class="title">AppCompatActivity</span> </span>&#123;</span><br><span class="line"></span><br><span class="line">    <span class="meta">@Override</span></span><br><span class="line">    <span class="function"><span class="keyword">public</span> <span class="keyword">void</span> <span class="title">onCreate</span><span class="params">(Bundle savedInstanceState)</span> </span>&#123;</span><br><span class="line">        </span><br><span class="line">        ...</span><br><span class="line"></span><br><span class="line">        loginPassword.setOnKeyListener(<span class="keyword">new</span> View.OnKeyListener() &#123;</span><br><span class="line">            <span class="meta">@Override</span></span><br><span class="line">            <span class="function"><span class="keyword">public</span> <span class="keyword">boolean</span> <span class="title">onKey</span><span class="params">(View view, <span class="keyword">int</span> i, KeyEvent keyEvent)</span> </span>&#123;</span><br><span class="line">                <span class="keyword">if</span> (i == keyEvent.KEYCODE_ENTER &amp;&amp; keyEvent.getAction() == KeyEvent.ACTION_UP) &#123;</span><br><span class="line">                    loginOn.callOnClick();</span><br><span class="line">                    <span class="keyword">return</span> <span class="keyword">true</span>;</span><br><span class="line">                &#125;</span><br><span class="line">                <span class="keyword">return</span> <span class="keyword">false</span>;</span><br><span class="line">                <span class="comment">/* 关于返回值的说明</span></span><br><span class="line"><span class="comment">                 * 返回值为true，表示事件已完全处理，系统无需再处理此键</span></span><br><span class="line"><span class="comment">                 * 返回值为false，表示事件处理过后，还要交给系统继续处理</span></span><br><span class="line"><span class="comment">                 * 参考此回答：https://zhidao.baidu.com/question/1430105248859125459.html</span></span><br><span class="line"><span class="comment">                 */</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;);</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>参考：</p>
<ol>
<li>android修改软键盘的回车键为搜索键以及点击时执行两次监听事件的问题 - CSDN博客 <a href="http://blog.csdn.net/coderk2014/article/details/51766485" target="_blank" rel="noopener">http://blog.csdn.net/coderk2014/article/details/51766485</a></li>
<li><a href="http://www.jb51.net/article/31797.htm" target="_blank" rel="noopener">http://www.jb51.net/article/31797.htm</a></li>
</ol>
<h1 id="5-Gson踩坑记录"><a href="#5-Gson踩坑记录" class="headerlink" title="5. Gson踩坑记录"></a>5. Gson踩坑记录</h1><p><strong>Gson解析：</strong>解析对象：Card Bean 属性：<br>&ensp;&ensp;1. 标题（String）<br>&ensp;&ensp;2. 摘要（String）<br>&ensp;&ensp;3. 头像（CircleTextImageView）  </p>
<p><strong>出现错误：</strong>java lang illegal argument…<br><strong>出错原因：</strong>CircleTextImageView存在于父类（ImageView）相同的命名区间，造成Gson无法解析成Json</p>
<p><strong>解决办法：</strong></p>
<p><strong>a.</strong> 修改CircleTextImageView源码 -&gt; 禁止修改 -&gt; 失败</p>
<p><strong>b.</strong> 自建一个CircleAvatarImageView继承自CircleTextImageView并用<code>@Exposed</code>覆盖父类同名变量 -&gt; 发现自制的View会出现头像无法显示为圆形的问题 -&gt; 放弃</p>
<p><strong>c.</strong> 在Github上把CircleTextImageView项目fork下来，自己更改一下（只添加<code>@Exposed</code>）并尝试在jitpack发布<br>    &ensp;&ensp;-&gt; 问题：jitpack报错：无法识别<code>@Exposed</code><br>    &ensp;&ensp;-&gt; 添加Gson的compile和import后…<br>    &ensp;&ensp;-&gt; 报了更多的错误<br>    &ensp;&ensp;-&gt; 放弃  </p>
<p><strong>d.</strong> 看到有篇文章说改用fastJson替代Gson可以解决。自己试了一下 -&gt; 发现不报运行错误了，但保存数据量过大，导致系统模拟器直接死机 -&gt; 失败  </p>
<p><strong>e.</strong> 分析应该是CircleTextImageView直接解析成Json造成的错误（可能是转换数据量过大）。因此改为从源头修改CardBean属性：<br>&ensp;&ensp;1. 标题（String）<br>&ensp;&ensp;2. 摘要（string）<br>&ensp;&ensp;3. 头像：<br>    &ensp;&ensp;&ensp;&ensp;1. 图片头像（Drawable）<br>    &ensp;&ensp;&ensp;&ensp;2. 文字头像：<br>        &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;1. 文字内容（String）<br>        &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;2. 文字颜色（int）<br>        &ensp;&ensp;&ensp;&ensp;&ensp;&ensp;3. 背景填充色（int）<br>    &ensp;&ensp;-&gt; 发现其他地方不再报错，但有一个新错误：Gson解析无法识别<code>value=null</code>的值，也就是CardBean中的Drawable为空时会出错<br>    &ensp;&ensp;-&gt; 失败  </p>
<p><strong>f.</strong> 将Drawable改为resId（int），解决了最后一个错误 -&gt; 成功</p>
<hr>
<h1 id="相关参考"><a href="#相关参考" class="headerlink" title="相关参考"></a>相关参考</h1><ol>
<li><strong>安卓屏幕完美适配方案——独家秘笈 - CSDN博客 <a href="http://blog.csdn.net/jiashuai94/article/details/77639511" target="_blank" rel="noopener">http://blog.csdn.net/jiashuai94/article/details/77639511</a> </strong></li>
<li>AndroidStudio中的图片资源存放位置以及drawable文件夹的创建方法 - gulingfengze的博客 - CSDN博客 <a href="http://m.blog.csdn.net/gulingfengze/article/details/53437139" target="_blank" rel="noopener">http://m.blog.csdn.net/gulingfengze/article/details/53437139</a></li>
<li>Android 初阶自定义 View 字符头像 - Sun‘刺眼的博客 - 博客园 <a href="https://www.cnblogs.com/android-blogs/p/5995604.html" target="_blank" rel="noopener">https://www.cnblogs.com/android-blogs/p/5995604.html</a></li>
<li>substring用法<em>IT小石头</em>新浪博客 <a href="http://blog.sina.com.cn/s/blog_8e761c1101015oca.html" target="_blank" rel="noopener">http://blog.sina.com.cn/s/blog_8e761c1101015oca.html</a></li>
<li><strong>android圆形图片,圆形背景文字的CircleTextImageView开源组件 - 泡在网上的日子 <a href="http://www.jcodecraeer.com/plus/view.php?aid=3787" target="_blank" rel="noopener">http://www.jcodecraeer.com/plus/view.php?aid=3787</a> </strong></li>
<li>Android开发中的finish()与onDestroy()方法都是用来结束activity的吧？两个有什么区别？_百度知道 <a href="https://zhidao.baidu.com/question/263327953946957565.html" target="_blank" rel="noopener">https://zhidao.baidu.com/question/263327953946957565.html</a></li>
<li><strong>图标在线生成工具Android Asset Studio的使用 - 泡在网上的日子 <a href="http://www.jcodecraeer.com/plus/view.php?aid=7823" target="_blank" rel="noopener">http://www.jcodecraeer.com/plus/view.php?aid=7823</a> </strong></li>
<li>Android 文本监听接口TextWatcher详解 - 梦工厂 - CSDN博客 <a href="http://blog.csdn.net/zhuwentao2150/article/details/51546773" target="_blank" rel="noopener">http://blog.csdn.net/zhuwentao2150/article/details/51546773</a></li>
<li>监听EditText内容变化的两种方式 - VipPetergee的博客 - CSDN博客 <a href="http://blog.csdn.net/sinat_35241409/article/details/53709537" target="_blank" rel="noopener">http://blog.csdn.net/sinat_35241409/article/details/53709537</a></li>
<li>Android 优雅的为RecyclerView添加HeaderView和FooterView - Hongyang - CSDN博客 <a href="http://blog.csdn.net/lmj623565791/article/details/51854533" target="_blank" rel="noopener">http://blog.csdn.net/lmj623565791/article/details/51854533</a></li>
<li>android RecyclerView一步步打造分组效果、类似QQ分组、折叠菜单、分组效果（一） - CSDN博客 <a href="http://blog.csdn.net/fan7983377/article/details/77949101" target="_blank" rel="noopener">http://blog.csdn.net/fan7983377/article/details/77949101</a></li>
<li><strong>打造最强RecyclerView，Item侧滑菜单，长按拖拽Item，滑动删除Item - 泡在网上的日子 <a href="http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2016/0805/4573.html" target="_blank" rel="noopener">http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2016/0805/4573.html</a> </strong></li>
<li><strong>yanzhenjie/SwipeRecyclerView: :+1: RecyclerView侧滑菜单，Item拖拽，滑动删除Item，自动加载更多，HeaderView，FooterView，Item分组黏贴。 <a href="https://github.com/yanzhenjie/SwipeRecyclerView" target="_blank" rel="noopener">https://github.com/yanzhenjie/SwipeRecyclerView</a> </strong></li>
<li>如何判断EditText是否有焦点 - CSDN博客 <a href="http://blog.csdn.net/north1989/article/details/52918939" target="_blank" rel="noopener">http://blog.csdn.net/north1989/article/details/52918939</a></li>
<li>Android Studio 怎么修改默认注释create by 作者名 - CSDN博客 <a href="http://blog.csdn.net/h_o_w_e/article/details/54987399" target="_blank" rel="noopener">http://blog.csdn.net/h_o_w_e/article/details/54987399</a></li>
<li>获取imageview里的Bitmap - CSDN博客 <a href="http://blog.csdn.net/a907763895/article/details/11905699" target="_blank" rel="noopener">http://blog.csdn.net/a907763895/article/details/11905699</a></li>
<li>解决Gson解析错误：<ol>
<li>Gson解析：declares multiple JSON fields named XXX - CSDN博客 <a href="http://blog.csdn.net/u013628152/article/details/50481889" target="_blank" rel="noopener">http://blog.csdn.net/u013628152/article/details/50481889</a></li>
<li>java.lang.IllegalArgumentException: A declares multiple JSON fields named DatingType - CSDN博客 <a href="http://blog.csdn.net/xiadanxin/article/details/54313634" target="_blank" rel="noopener">http://blog.csdn.net/xiadanxin/article/details/54313634</a></li>
<li>Android创建自己的gradle依赖包 - CSDN博客 <a href="http://blog.csdn.net/tgbus18990140382/article/details/53066865" target="_blank" rel="noopener">http://blog.csdn.net/tgbus18990140382/article/details/53066865</a></li>
<li>gson json字符串转换 - Xgx120413的专栏 - CSDN博客 <a href="http://m.blog.csdn.net/xgx120413/article/details/50464267" target="_blank" rel="noopener">http://m.blog.csdn.net/xgx120413/article/details/50464267</a></li>
<li>java中Map,List与Set的区别 - - CSDN博客 <a href="http://m.blog.csdn.net/speedme/article/details/22398395" target="_blank" rel="noopener">http://m.blog.csdn.net/speedme/article/details/22398395</a></li>
<li><strong>java - Gson.toString() gives error “IllegalArgumentException: multiple JSON fields named mPaint” - Stack Overflow <a href="https://stackoverflow.com/questions/19315431/gson-tostring-gives-error-illegalargumentexception-multiple-json-fields-name" target="_blank" rel="noopener">https://stackoverflow.com/questions/19315431/gson-tostring-gives-error-illegalargumentexception-multiple-json-fields-name</a> </strong></li>
<li>com.google.gson Gson 解析时报错： declares multiple JSON fields named XXX - 路修道远 - 博客园 <a href="https://www.cnblogs.com/zihuwuyu/p/5767258.html" target="_blank" rel="noopener">https://www.cnblogs.com/zihuwuyu/p/5767258.html</a></li>
</ol>
</li>
<li>android修改软键盘的回车键为搜索键以及点击时执行两次监听事件的问题 - CSDN博客 <a href="http://blog.csdn.net/coderk2014/article/details/51766485" target="_blank" rel="noopener">http://blog.csdn.net/coderk2014/article/details/51766485</a></li>
</ol>
<hr>
<h1 id="日志"><a href="#日志" class="headerlink" title="日志"></a>日志</h1><p><strong>2017年12月4日</strong></p>
<ol>
<li>【更新】右分页按钮图标重制</li>
<li>【修改】右分页调整布局间距（简化代码，适当拉长编辑框）</li>
<li>【修改】右分页“保存”按钮重新使用selector背景色</li>
</ol>
<p><strong>2017年12月5日</strong></p>
<ol>
<li>【更新】右分页绑定栏按钮重制</li>
<li>【更新】右分页绑定栏布局恢复为HorizontalScrollView</li>
<li><strong>【更新】使用<a href="https://github.com/CoolThink/CircleTextImageView" target="_blank" rel="noopener">CircleTextImageView</a>代替原CircleImageView</strong></li>
</ol>
<p><strong>2017年12月6日</strong></p>
<ol>
<li>【修改】右分页“保存”按钮文字点击变色</li>
<li>【修改】解决登录界面使用Enter键造成两次响应的bug（<a href="http://blog.csdn.net/coderk2014/article/details/51766485" target="_blank" rel="noopener">参考</a>）</li>
<li>【更新】简化头像生成逻辑</li>
<li>【更新】优化MainActivity代码结构</li>
</ol>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
        <div class="post-widgets">
        

        

        
          
          <div id="needsharebutton-postbottom">
            <span class="btn">
              <i class="fa fa-share-alt" aria-hidden="true"></i>
            </span>
          </div>
        
        </div>
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2017/1203202855/" rel="next" title="06 Anykey用户数据的存储和加载SecuritySharedPreference">
                <i class="fa fa-chevron-left"></i> 06 Anykey用户数据的存储和加载SecuritySharedPreference
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2017/1226175311/" rel="prev" title="08 Anykey设计规范">
                08 Anykey设计规范 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
      <div id="lv-container" data-id="city" data-uid="MTAyMC8zNDI4MS8xMDgxOA=="></div>
    </div>

  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <img class="site-author-image" itemprop="image"
                src="http://ozurciydg.bkt.clouddn.com/18-2-12/72826549.jpg"
                alt="Likianta" />
            
              <p class="site-author-name" itemprop="name">Likianta</p>
              <p class="site-description motion-element" itemprop="description">Android Dev</p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">73</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">8</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">2</span>
                  <span class="site-state-item-name">标签</span>
                </a>
              </div>
            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a href="http://blog.csdn.net/likianta" target="_blank" title="CSDN">
                      
                        <i class="fa fa-fw fa-crosshairs"></i>CSDN</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="mailto:sheerish@qq.com" target="_blank" title="E-Mail">
                      
                        <i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://github.com/likianta" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a href="https://weibo.com/5441767757/profile?rightmod=1&wvr=6&mod=personinfo" target="_blank" title="Weibo">
                      
                        <i class="fa fa-fw fa-weibo"></i>Weibo</a>
                  </span>
                
            </div>
          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link" href="#1-先看一下最终的效果图"><span class="nav-text">1. 先看一下最终的效果图</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#2-解决真机调试发生OOM崩溃的问题"><span class="nav-text">2. 解决真机调试发生OOM崩溃的问题</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#2-1-先来分析为什么之前的图片加载会导致内存溢出"><span class="nav-text">2.1. 先来分析为什么之前的图片加载会导致内存溢出</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-2-图标素材重制"><span class="nav-text">2.2. 图标素材重制</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#3-文字头像的生成、保存与加载"><span class="nav-text">3. 文字头像的生成、保存与加载</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#3-1-从用户的使用情景分析头像的来源"><span class="nav-text">3.1. 从用户的使用情景分析头像的来源</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-2-文字头像的整体实现思路"><span class="nav-text">3.2. 文字头像的整体实现思路</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-3-使用CircleTextImageView取代CircleImageView"><span class="nav-text">3.3. 使用CircleTextImageView取代CircleImageView</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-4-生成右分页的头像"><span class="nav-text">3.4. 生成右分页的头像</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-4-1-制作右分页的头像生成GenerateUserHead"><span class="nav-text">3.4.1. 制作右分页的头像生成GenerateUserHead</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-4-2-设置监听器"><span class="nav-text">3.4.2. 设置监听器</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-5-使头像在左分页相应卡片中出现"><span class="nav-text">3.5. 使头像在左分页相应卡片中出现</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#3-5-1-完善Card属性"><span class="nav-text">3.5.1. 完善Card属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-5-2-CardAdapter"><span class="nav-text">3.5.2. CardAdapter</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#4-更新修复"><span class="nav-text">4. 更新修复</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#4-1-解决在登录界面按Enter键登录事件被连续触发两次的bug"><span class="nav-text">4.1. 解决在登录界面按Enter键登录事件被连续触发两次的bug</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link" href="#5-Gson踩坑记录"><span class="nav-text">5. Gson踩坑记录</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#相关参考"><span class="nav-text">相关参考</span></a></li><li class="nav-item nav-level-1"><a class="nav-link" href="#日志"><span class="nav-text">日志</span></a></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; 2017 &mdash; <span itemprop="copyrightYear">2018</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">Likianta</span>

  
</div>


  <div class="powered-by">
    <i class="fa fa-user-md"></i>
    <span id="busuanzi_container_site_pv">
      Site visitors:<span id="busuanzi_value_site_pv"></span>
    </span>
  </div>

<!--
  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Mist</a> v5.1.3</div>

-->



<div class="theme-info">
  <div class="powered-by"></div>
  <span class="post-count">Site words total count:75.2k</span>
</div>
        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.3"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.3"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.3"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.3"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.3"></script>



  


  




	





  





  
    <script type="text/javascript">
      (function(d, s) {
        var j, e = d.getElementsByTagName(s)[0];
        if (typeof LivereTower === 'function') { return; }
        j = d.createElement(s);
        j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
        j.async = true;
        e.parentNode.insertBefore(j, e);
      })(document, 'script');
    </script>
  












  





  

  

  

  
  
  
  <link rel="stylesheet" href="/lib/needsharebutton/needsharebutton.css">

  
  
  <script src="/lib/needsharebutton/needsharebutton.js"></script>

  <script>
    
      pbOptions = {};
      
          pbOptions.iconStyle = "box";
      
          pbOptions.boxForm = "horizontal";
      
          pbOptions.position = "bottomCenter";
      
          pbOptions.networks = "Weibo,Wechat,Douban,QQZone,Evernote";
      
      new needShareButton('#needsharebutton-postbottom', pbOptions);
    
    
  </script>

  

  

  

  

</body>
</html>
